<template>
    <div class="demo">
        <h2>学生名称：{{name}}</h2>
        <h2>学生年龄：{{age}}</h2>

        <h2>当前求和为：{{number}}</h2>
        <button @click="add()">点我number++</button>

        <button @click="sendStudentName">把学生姓名给App</button>

        <button @click="unbind()">解绑atguigu事件</button>

        <button @click="death()">销毁当前Student 组件的实例（vc）</button>
        <hr>
    </div>
</template>

<script>
    export default {
        name: 'Student',
        data() {
            console.log(this);
            return {
                name: '张三',
                age: 19,
                number: 0,
            }
        },
        methods: {
            sendStudentName() {
                // 触发Student 组件实例身上的atguigu事件
                this.$emit('atguigu', this.name, 666, 888, 999);

                this.$emit('demo');
            },
            add() {
                console.log('add回调被调用了！！！');
                this.number++;
            },
            unbind() {
                this.$off('atguigu');// 解绑一个自定义事件
                this.$off(['atguigu', 'demo']); // 解绑多个自定义事件
                this.$off(); // 解绑所有的自定义事件
            },
            death() {
                this.$destroy(); // 销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全部都不奏效了
            }
        },
    }
</script>

<style scoped>
    .demo {
        background-color: yellow;
    }
</style>